技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2018 iT 邦幫忙鐵人賽
DAY
3
1
自我挑戰組
網頁學習日誌
系列 第
3
篇
CSS : display屬性-區塊和行內元素差異
2018鐵人賽
yuski
2017-12-06 14:21:14
9054 瀏覽
分享至
diplay區塊和行內屬性表格分析:
block(區塊元素)
inline(行內元素)
inline-block
差異
將整行容器空間占滿,所以會分行排列
與文字段落同行排列
效果同於float,同時具有block(區塊)和inline(行內)屬性
影響範圍
整行都可以點到
元素範圍以外點不到
元素範圍以外點不到
使用地方
使用手機點選按鈕、選單等需大範圍感應區域的元素
a連結
元素並排
block: 區塊將整行空間占滿,後面元素往下行排
inline:同行排列
display屬性 最常用在 ul li 清單項目,ul li預設都為block所以都會分行排列
所以如果要讓li並排,只要設定li為display:inline 或是 inline-block,ul 和 li都可在同行顯示,但是ul仍然還是區塊元素(block)。
留言
追蹤
檢舉
上一篇
CSS : position 絕對定位與相對定位
下一篇
CSS : 網頁排版要注意的Box Model(盒模型)
系列文
網頁學習日誌
共
30
篇
目錄
RSS系列文
訂閱系列文
69
人訂閱
26
API : Google Maps API 設定(2)地圖標記
27
API : Google Maps API 設定(3)新增多個標記
28
API : Google Maps API 設定(4) js+json 標記 wifi 熱點
29
Flex:春聯
30
Flex : Bootstrap 4 Flex 網格
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
11712
篇
完賽人數
106
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
17th鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
因為網路磁碟的關係造成系統自動重新開機
windows server無法使用gpedit.msc
Java證照題目(main() method)
iatf16949資訊稽核
微軟更新重開機很久
iatf16949資訊稽核內容
請問有推蘪的server , vmware 防毒軟體嗎
瀏覽某網站,時間太長
部屬電腦如何讓每一台開始功能表跟工作列都一樣
熱門回答
iatf16949資訊稽核
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
因為網路磁碟的關係造成系統自動重新開機
微軟更新重開機很久
請問有推蘪的server , vmware 防毒軟體嗎
熱門文章
第5天,數位憑證的格式 PEM、DER / 小辣椒魷魚羹(台北萬華)| 30天滷肉飯
第5天,Cloudflare 的費用 / 潤餅捲 | 30天板橋湳雅夜市
第6天,憑證信任鏈 / 阿輝滷肉飯 浮洲市場小吃(新北板橋) | 30天滷肉飯
[為你自己學 n8n] 第 5 天,JSON 不是人名!搞懂自動化的基礎語言!
[為你自己學 n8n] 第 9 天,Google 大神駕到:串接服務的必修儀式!
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}